<!-- eslint-disable vue/no-deprecated-router-link-tag-prop -->
<template>
  <div class="home">
    <div class="header">
      <div class="center">
        <img src="/logo.png" alt="" />
        Music
      </div>
      <div class="icon">
        <span class="icon iconfont">&#xe601;</span>
        <span class="icon iconfont">&#xe6c7;</span>
      </div>
    </div>
     <router-view></router-view>
    <ul class="nav">
      <router-link to="" tag="li" active-class="sel">
       <span class="icon iconfont">&#xe6c7;</span>
      </router-link>
      <router-link to="singer" tag="li" active-class="sel"></router-link>
      <router-link to="" tag="li" active-class="sel"></router-link>
      <router-link to="" tag="li" active-class="sel"></router-link>
    </ul>
    <ul class="nav1">
      <li><span>音乐馆</span></li>
      <li><span>推荐</span></li>
      <li><span>动态</span></li>
      <li><span>我的</span></li>
    </ul>
   
  </div>
</template>
<script>
import img from "@assets/logo.png";

export default {
  data() {
    return {
      img,
    };
  },
};
</script>
<style scoped lang="less">
@import "~@style/index.less";
.home {
   display: flex;
   flex-direction: column;
   background: #222;
  
   
  .header {
    .w(320);
    .h(44);
    color: #ffcd32;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
   
    .center {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 22px;
      font-weight: 400;
      img {
        .w(22);
        .h(22);
      }
    }
    .icon {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      .w(44);
      .h(44);
      top: 0px;
      right: 0px;
    }
  }
  //底部字体
  .nav1{
   .w(414);
    .h(10);
    display: flex;
    position: absolute;
    bottom: 10px;
      li{
      width: 25%;
     // color: #ffffff80;
      color: #222;
    display: flex;
      justify-content: center;
      align-items: center;
      span {
        display: inline-block;
        .w(50);
        .h(10);
        // border-bottom: 2px solid #222 ;
      }
    }}
  //导航
  .nav {
    .w(414);
    .h(35);
    display: flex;
    position: absolute;
    bottom: 10px;
    
    li{
      width: 25%;
      color: #ffffff80;
      color: #222;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        display: inline-block;
        .w(50);
        .h(27);
        
        // border-bottom: 2px solid #222 ;
      }
       &.sel {
        // color: #ffcd32;
        span {
        
        }
      }
    } 
  }
}

</style>
